<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <!-- 3D display area -->
  <div class="show-three-main">
    <div ref="container" class="common-three-class" />
    <!-- tool bar -->
    <Toolbar
      v-if="modelUrl"
      :config="toolbarConfig"
      :selectedTool.sync="selectedTool"
      @on-click="buttonClick"
    />
  </div>
</template>

<script>
import Toolbar from "./components/Toolbar.vue";
import ToolbarConfig from "./config/toolbar.config.js";
import { createCloudChart } from "./api/three/CloudChart.js";

export default {
  name: "ShowThreeCloud",
  components: {
    Toolbar
  },
  props: {
    // 三维模型文件地址
    modelUrl: {
      type: String,
      default: ""
    }
  },
  watch: {
    modelUrl: {
      handler() {
        this.loadGltf(this.modelUrl);
      },
      deep: true
    }
  },
  methods: {
    // 装载模型
    loadGltf(modelUrl) {
      this.cloudObj.clear();
      if (modelUrl) {
        this.cloudObj
          .loadGltf(modelUrl)
          .then(() => {
            this.$emit("load-end");
          })
          .catch(() => {
            this.$emit("load-end");
          });
      }
    },
    buttonClick(id) {
        this.cloudObj.toolbarAction(id.split("Cloud")[0]);
    }
  },
  data() {
    return {
      toolbarConfig: ToolbarConfig.cloudToolbar,
      selectedTool: "defaultCloud"
    };
  },
  mounted() {
    this.cloudObj = createCloudChart.getInstance(this.$refs.container);
    this.loadGltf(this.modelUrl);
  },
  beforeDestroy() {
    this.cloudObj.clear();
  }
};
</script>

<style lang="less" scoped>
.show-three-main {
  display: flex;
  height: 100%;
  position: relative;
}
.common-three-class {
  width: 100%;
  height: 100%;
}
</style>